<template>
  <div id="bigDiv">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="录播课程" name="first">
        <ul v-for="(item,index) in tableData" :key="index">
          <li>
            <div style="background: #F5F5F5;height: 36px;line-height: 36px;font-size: 15px;">
              <div class="messageHead">订单号：{{item.orderNo}}</div>
              <div class="messageHead">订单时间：{{item.orderCreate}}</div>
            </div>
            <div style="margin-top: 20px;height: 100px">
              <div style="float: left;width:46%">
                <img :src="item.eduCourse.cover" style="width: 150px;height:80px;float:left;padding: 0 50px 0 50px">
                <span style="font-size: 15px">{{item.eduCourse.title}}</span>
              </div>
              <div class="details" style="color: crimson">￥{{item.pricePayable}}.00</div>
              <div class="details" style="color: gray">{{item.payType}}支付</div>
              <div class="details" style="color: deepskyblue" v-if="item.orderStatus==0">等待支付</div>
              <div class="details" style="color: deepskyblue" v-if="item.orderStatus==1">已支付</div>
              <div class="details" style="color: deepskyblue" v-if="item.orderStatus==2">订单关闭</div>
              <div class="details" style="float: left;font-size: 15px;margin-left: 50px;width:7%;color: deepskyblue">
                <button id="PayBtn" v-if="item.orderStatus==0" @click="goOnPay(item)">继续支付</button>
                <button id="CancelPay" v-if="item.orderStatus==0" @click="CancelPayment(item)">取消支付</button>
              </div>
            </div>
          </li>
        </ul>
        <el-pagination style="text-align: center;margin-top: 50px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes=pageSizes
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total=page.total>
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="开源专区" name="second">
        <div style="margin: auto;color: #999999;padding: 100px 0 0 400px;font-size: 30px">
          <i class="el-icon-s-management"></i> 暂时没有数据
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import qs from 'qs'
  export default {
    name: "myCourse",
    data() {
      return {
        activeName: 'first',
        tableData:[],
        records:{
          /*orderNo:[],//订单号
          orderCreate:'',//生成时间
          cover:'',//课程图片
          title:'',//课程标题
          pricePayable:'',//应付金额
          payType:'',//支付方式
          orderStatus:''//支付状态（0,待支付1已支付,2已关闭(用户关闭，系统关闭)）*/
        },
        dd:{
          orderId:'',
          orderno:'',
          money:'',
        },
        //这个page是用来分页和传参的的
        page:{
          size: 5,
          total: 10,
          userNo:sessionStorage.getItem('uid'),
        },
        pageSizes: [5],
        currentPage4: 1
      };
    },
    created(){
      this.findAll();
    },
    methods: {
      handleClick(tab, event) {
        //console.log(tab, event);
      },
      findAll(){
        this.$axios2.post("/order/orderInfo/findAllById",qs.stringify(this.page)).then(res=>{
          this.tableData=res.data.records;
          this.page.total=res.data.total;
          this.page.size=res.data.size;
        })
      },
      CancelPayment(val){
        this.dd.orderId=val.orderId;
        this.$confirm('哈喽！您确定取消支付该订单吗?', '提示', {
          confirmButtonText: '我不想买',
          cancelButtonText: '再看看',
          type: 'warning'
        }).then(() => {
          this.$axios2.post("/order/orderInfo/removeOrder",qs.stringify(this.dd)).then(r=>{
            if (r.data){
              this.$message({
                type: 'success',
                message: '取消成功!'
              });
            } else {
              this.$message({
                type: 'info',
                message: '系统繁忙，请稍后重试'
              });
            }
            this.findAll();
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '明智的选择'
          });
        });


      },
      goOnPay(row){
        //alert(JSON.stringify(row));
        this.dd.money=row.pricePayable;
        this.dd.orderId=row.orderId;
        this.dd.orderno=row.orderNo;
        let temp=document.createElement("form");
        temp.action="http://localhost:8898/order/toPay2";
        temp.method="post";
        temp.style.display="none";
        for (let ddKey in this.dd) {
          let opt=document.createElement("textarea");
          opt.name=ddKey;
          opt.value=this.dd[ddKey];
          temp.appendChild(opt);
        }
        document.body.appendChild(temp);
        temp.submit();
        return temp;
      },
      handleSizeChange(val) {
        this.page.size = `${val}`;
        this.findAll();
      },
      handleCurrentChange(val) {
        this.page.current = `${val}`;
        this.findAll();
      }
    }
  }
</script>

<style scoped>
  ul{
    padding: 0;
  }
  li{
    height: 140px;
    border-bottom: 1px solid lightgray;
    list-style: none;
  }
  #bigDiv{
    width: 1000px;
    height: 900px;
    /*border: 1px solid #EBEEF5;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);*/
    padding: 10px;
  }
  #PayBtn{
    width: 78px;
    height: 32px;
    border: 1px solid orange;
    border-radius: 5px;
    background: white;
    color: orange;
  }
  #CancelPay{
    width: 78px;
    height: 32px;
    border: 0;
    border-radius: 5px;
    color: gray;
    margin-top: 5px;
  }
  .details{
    float: left;
    font-size: 15px;
    margin-left: 4%;
    width:8%;
  }
  .messageHead{
    float: left;
    margin-left: 30px;
    color: gray;
  }
</style>
